<template>
    <div class="border rounded" style="height: 100%;">
        <v-navigation-drawer v-model="drawer" :rail="selectedRail" permanent>
            <v-list density="compact" color="success">
                <v-list-subheader v-if="!selectedRail">功能列表</v-list-subheader>
                <v-list-item prepend-icon="mdi-folder" title="My Files" value="myfiles"></v-list-item>
                <v-list-item prepend-icon="mdi-account-multiple" title="Shared with me" value="shared"></v-list-item>
                <v-list-item prepend-icon="mdi-star" title="Starred" value="starred"></v-list-item>
            </v-list>
      </v-navigation-drawer>
    <v-toolbar density="compact" color="surface">
            <v-app-bar-nav-icon @click.stop="selectedRail = !selectedRail"></v-app-bar-nav-icon>
            <v-toolbar-title>选项名称</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon @click="SetNewDarkTheme">
                <v-icon>{{ customizeTheme.getDarkTheme ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
            </v-btn>
            <userAvatar></userAvatar>
            <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
            <v-btn icon>
                <v-icon>mdi-dock-window</v-icon>
                <v-tooltip activator="parent" location="bottom">独立显示窗口</v-tooltip>
            </v-btn>
        </v-toolbar>
        <div style="height: calc(100% - 53px);">
            <iframe src="https://www.baidu.com" width="100%" height="100%" style="border: none;"></iframe>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useAppStore } from "@renderer/stores/appConfig";
import userAvatar from "@renderer/components/toolbar/userAvatar.vue";

const drawer = ref(true)
const selectedRail = ref(false)
const customizeTheme = useAppStore();

function SetNewDarkTheme() {
    customizeTheme.$state.darkTheme = !customizeTheme.getDarkTheme;
}

</script>
